<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>tiptap 中文文档 - itxst.com</title>
    <meta name="keywords" content="tiptap 中文文档" />
    <meta name="description" content="tiptap 一款支持vue2和vue3、react的网页编辑器，特点是可以非常方便的自定义工具栏和支持html和json格式，你完全可以把编辑器UI设计成你需要的界面。" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta http-equiv="Content-Language" content="zh-CN">
    <link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
    <link href="/css/zt.css?ver=1.6.6" rel="stylesheet" type="text/css" media="all" />
    <script type="text/javascript" language="javascript" src="/js/jquery.js?ver=1.6.6"></script>
    <script type="text/javascript" src="/js/highlight/highlight.min.js?ver=1.6.6"></script>
    <link rel="stylesheet" type="text/css" href="/js/highlight/styles/vs2015x.css?ver=1.6.6">
    <script type="text/javascript" language="javascript" src="/js/comm.js?ver=1.6.6"></script>
    <script type="text/javascript" language="javascript" src="/js/zt.js?ver=1.6.6"></script>
    <script type="text/javascript" charset="utf-8" src="/js/layer/layer.js?ver=1.6.6"></script>
    <link rel="alternate" media="only screen and(max-width: 640px)" href="http://m.itxst.com/tiptap/tutorial.html" >
    <!--[if lte IE 9]>
    <script src="/js/respond/respond.js?ver=1.6.6"></script>
    <![endif]-->
</head>
<body>
    <div class="body"  >
        <div class="header">
            <div class="naver">
                <div class="logo">
                    <a href="/"><img src="/img/logov31.png" /></a>
                </div>
                <div class="naver-left">
                 <a href="/tiptap/tutorial.html">tiptap 中文文档</a>
                </div>
                <div class="naver-search">
                    <div class="naver-search-txt">
                        <input type="text" id="keyword" placeholder="Please enter the keyword" data-topic="tiptap">
                    </div>
                    <div class="naver-search-btn"><a href="javascript:void(0)" onclick="Search()">Search</a></div>
                </div>
                 <div class="naver-right"> 
                        <a href="/ag-grid/tutorial.html">AG-GRID</a> 
                        <a href="/tiptap/tutorial.html">Tiptap</a> 
                        <a href="/css-flex/tutorial.html">CSS-FLEX</a> 
                        <a href="/Bootstrap-Table/QuickStart.html">Bootstrap-Table</a> 
                </div>
            </div>
            <div class="path">
                
            </div>
        </div>
        <div class="clearfix"></div>
        <div class="pagew">
        <div class="page" >
            <div class="page-body">
                <div class="content-detail">
                    <h1>tiptap 中文文档</h1>
               
               <p class="p"><strong>tiptap</strong> 一款支持<strong>vue2</strong>和<strong>vue3</strong>、<strong>react</strong>的网页编辑器，特点是可以非常方便的自定义工具栏和支持<strong>html</strong>和<strong>json</strong>格式，你完全可以把编辑器UI设计成你需要的界面，给我个人的感觉<strong>tiptap</strong>是介于<strong>markdown</strong>与<strong>html</strong>之间的一种编辑器很灵活。</p><h2>官方网站</h2><p><a href="https://tiptap.dev/" target="_blank">https://tiptap.dev</a></p><h2>tiptap 概念</h2><ul class="p list-paddingleft-2"><li><p><strong>无工具栏</strong> 轻量化默认不自带工具栏，可扩展性强和简洁</p></li><li><p><strong>协同</strong> 支持html和json，json格式你可以在其他端（安卓、IOS等）实现编辑和浏览</p></li><li><p><strong>extension</strong> 开箱即用的 extension 扩展插件，比如文字颜色扩展、表格扩展</p></li></ul><h2>安装 tiptap</h2><pre class="brush:js;toolbar:false;"><code class="language-javascript">// vue2 安装
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit
// vue3 安装
npm install @tiptap/vue-3 @tiptap/pm @tiptap/starter-kit
// react 安装
npm install @tiptap/react @tiptap/pm @tiptap/starter-kit
// nuxt.js 安装
npm install @tiptap/vue-2 @tiptap/pm @tiptap/starter-kit</code></pre><h2>配置编辑器</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">// 导入对于的库及扩展
import { Editor } from '@tiptap/core'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
// new 一个编辑器对象
new Editor({ 
   //使用扩展
  extensions: [
    Document,
    Paragraph,
    Text,
  ],
  content: '&lt;p&gt;编辑器内容&lt;/p&gt;',
  // 编辑器自动获取焦点
  autofocus: true,
  // 编辑器是否可用
  editable: true,
  injectCSS: false,
})</code></pre><h2>安装扩展</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">// 例如安装color扩展(设置文字颜色的扩展)
npm install @tiptap/extension-text-style @tiptap/extension-color</code></pre><h2>配置扩展</h2><pre class="brush:js;toolbar:false"><code class="language-javascript">new Editor({
    content: "&lt;p&gt;Tiptap 中文文档&lt;/p&gt;",
    extensions: [
    StarterKit,
    //配置扩展
    Color.configure({
        types: ['textStyle'],
      })
    ],
  })</code></pre><h2>使用扩展</h2><pre class="brush:js;toolbar:false;"><code class="language-javascript">//html中 在工具栏使用使用选择颜色html控件,并把选中的颜色赋值给文字
&lt;input type="color" @input="onColor" :value="state.editor.getAttributes('textStyle').color"/&gt;

//js中 导入扩展
import Color from "@tiptap/extension-color";
import TextStyle from "@tiptap/extension-text-style";

//js事件中 设置文字颜色
state.editor.chain().focus().setColor($event.target.value).run();

//如果不能完全看明白，请查看阅读下面vue3的例子，里面包含了扩展的使用方法</code></pre><h2>vue3 入门例子</h2><pre class="brush:html;toolbar:false"><code class="language-html">&lt;template&gt;
  &lt;div&gt;
    &lt;div&gt;
      &lt;input
        type="color"
        @input="onColor"
        :value="state.editor.getAttributes('textStyle').color"
      /&gt;
      &lt;label @click="getHTML"&gt;获取Html&lt;/label&gt;
      &lt;label @click="getJSON"&gt;获取Json&lt;/label&gt;
      &lt;label @click="setHTML"&gt;设置Html&lt;/label&gt;
      &lt;label @click="setJSON"&gt;设置Json&lt;/label&gt;
      &lt;label&gt;插入内容&lt;/label&gt;
    &lt;/div&gt;
    &lt;editor-content :editor="state.editor" /&gt;
    &lt;div&gt;
      &lt;code&gt;
        {{ state.result }}
      &lt;/code&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script setup&gt;
/*
 tiptap 中文文档
 https://www.itxst.com/tiptap/tutorial.html
*/
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { Editor, EditorContent } from "@tiptap/vue-3";
import StarterKit from "@tiptap/starter-kit";
import Color from "@tiptap/extension-color";
import TextStyle from "@tiptap/extension-text-style";
const state = reactive({
  editor: new Editor({
    content: "&lt;p&gt;Tiptap 中文文档&lt;/p&gt;",
    extensions: [
      StarterKit,
      TextStyle,
      Color.configure({
        types: ["textStyle"],
      }),
    ],
    autofocus: true,
    editable: true,
    injectCSS: false,
  }) as any,
  result: "",
});


onMounted(() =&gt; {
  setTimeout(() =&gt; {
    state.editor.commands.setContent(
      "&lt;p&gt;Tiptap 中文文档 &lt;br&gt; https://www.itxst.com&lt;/p&gt;",
      false
    );
    //console.log(state.editor.getJSON());
  }, 3000);
});
//设置颜色
const onColor = ($event: any) =&gt; {
  // debugger;
  state.editor.chain().focus().setColor($event.target.value).run();
};
//获取Html
const getHTML = () =&gt; {
  state.result = state.editor.getHTML();
};
//获取Json
const setHTML = () =&gt; {
  state.editor.commands.setContent("&lt;p&gt; new 新的内容 &lt;/p&gt;", false);
};
//设置Html
const getJSON = () =&gt; {
  state.result = JSON.stringify(state.editor.getJSON());
};
//设置Json
const setJSON = () =&gt; {
  let doc = {
    type: "doc",
    content: [
      { type: "paragraph", content: [{ type: "text", text: "Tiptap JSON" }] },
    ],
  };
  state.editor.commands.setContent(doc, false);
};
&lt;/script&gt;
&lt;style scoped&gt;
.editor {
  margin: 10px 20px;
  width: 390px;
}
.editor:deep(.ProseMirror) {
  color: red;
  border: solid 1px #ddd;
  padding: 0px 6px;
}
.tools {
  display: flex;
  background-color: #eee;
  padding: 6px;
  justify-items: center;
}
.tools &gt; label {
  color: #1512e6;
  cursor: pointer;
}
.tools &gt; label + label {
  margin-left: 10px;
}
&lt;/style&gt;</code></pre><h2>在线试一试</h2><p><a class="btntry" href="//debug.itxst.com/js/m2avey3e" target="_blank" title="在线试一试">在线试一试</a></p>
 
               <h2>
    下载教程 Demo
</h2>
<p class="pe">
   本教程<b>Demo</b>的源码点击这里下载，<a href="https://img1.itxst.com/8/c/8c32fcdc12cb8847c62e405be8a73835.zip" target="_blank" textvalue="Tiptap Demo">Tiptap Demo</a>，下载完成后运行<b>npm i</b>初始化依赖包。
</p>
                </div>
                <div class="content-r">   <a href="/tiptap/tutorial.html" target="_self">
                     <img src="https://img1.itxst.com/0/9/09355b3592a0c16799b504a9f2a70303.png" alt="tiptap 中文文档" />
                    </a>                                                <a href="//www.itxst.com/vue-draggable/tutorial.html" target="_blank">
                                <img src="//img1.itxst.com/b/f/bf9af8368dfac84cd703ef54e1e89d14.png" alt="vue.draggable" />
                            </a>
 
                </div>
            </div>
            <div class="home-menu scroll">
                <div class="tree">
      <a data-level="1" class="leve-1   doc-1    doc-2 " href="/tiptap/tutorial.html" title="tiptap 中文文档">快速入门</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/configuration.html" title="Guide 向导">Guide 向导</a>
      <a data-level="1" class="leve-1    arrow-1" href="/tiptap/api.html" title="tiptap api 列表">API 列表</a>
                 </div>
                 <div  class="clearfix"></div>
            </div>
        </div>
        <div class="clearfix"></div>
           <div class="footer">
© 2023 itxst.com All rights reserved.
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?7e15ed96eb8133218e99de8bc1f5cb61";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>
       </div>
    </div> 
</body>
</html>
